<template>
	<view>
		<view class="main">
			<view class="title">
				<view class="h5">
					Hi
				</view>
				<view class="h6">
					欢迎来到 i世界
				</view>
			</view>
			<view class="banner">
				<view class="loginBox">
					<view class="inputBox">
						<text class="num">+86</text>
						<view class="line"></view>
						<u-input v-model="mobile" type='number' placeholder="请输入手机号" />
					</view>
					<view class="inputBox" style="margin-top: 40rpx;">
						<u-input v-model="code" type='number' placeholder="请输入验证码" maxlength='6' />
						<view class="code" @click="getCode" v-if="!isGetCode">
							获取验证码
						</view>
						<view class="code" v-else>
							{{timer}}s 后重新获取
						</view>
					</view>
					<view class="btn" @click="subLogin">
						登录
					</view>
					<view class="tips">
						登录即代表您同意我们的<text @click="navTo('../mine/server')">《服务协议》</text>和<text @click="navTo('../mine/clause')">《隐私政策》</text>
					</view>
				</view>
			</view>

			<view class="moreWay">
				<view class="more">
					<view class="line">
					</view>
					<text>更多方式</text>
					<view class="line">
					</view>
				</view>
				<image @click="wechatLogin" class="img" src="../../static/imgs/weixinhy.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				isGetCode: false,
				timer: 60,
				mobile: '',
				code: '',
        recommedu:''
			}
		},
    onLoad(){
		  //console.log(this.$store.state.recommedu)
      if(this.$store.state.recommedu !== Object && this.$store.state.recommedu !== ''){
        this.recommedu = this.$store.state.recommedu
      }
    },
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			async wechat(loginRes) {
				let res = await myRequest.welogin({
					unionid: loginRes.authResult.unionid
				})
				if (res.status) {
					uni.setStorage({
						key: 'token',
						data: res.data.token,
						success: function() {
							uni.switchTab({
								url: '../homePage/homePage'
							})
						}
					})
				}
			},

			// 微信登录
			wechatLogin() {
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									let openid = loginRes.authResult.openid
									let unionid = loginRes.authResult.unionid
									uni.setStorage({
										key: 'unionid',
										data: unionid
									})
									uni.setStorage({
										key: 'openid',
										data: openid
									})
									that.wechat(loginRes)
								}
							});
						}
					}
				});
			},
			// 登录
			async subLogin() {
				let {
					mobile,
					code,
          recommedu
				} = this
				if (!code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				let res = await myRequest.login({
					mobile: mobile,
					code: code,
          recommedu:recommedu
				})
				if (res.status) {
					// 保存用户等级
					this.$store.commit('changeInfo', res.data)
					// 保存koken
					uni.setStorage({
						key: 'token',
						data: res.data.token,
						success: function() {
							uni.switchTab({
								url: '../homePage/homePage'
							})
						}
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 倒计时
			countdown() {
				let that = this
				let myTimer = setInterval(() => {
					that.timer--
					if (that.timer == 0) {
						that.timer = 60
						that.isGetCode = false
						clearInterval(myTimer)
					}
				}, 1000)
			},
			// 获取验证码
			async getCode() {
				let {
					mobile
				} = this
				if (!mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				// 验证手机号

				if (this.$u.test.mobile(mobile)) {
					uni.showLoading()
					// 发送验证码
					let res = await myRequest.sendCode({
						mobile: mobile
					})
					if (res.status) {
						uni.showToast({
							title: '发送成功'
						})
						this.isGetCode = true
						this.countdown()
						uni.hideLoading()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: "您输入的手机号有误!",
						icon: 'none',
						duration: 2000,
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 1534rpx;
		background: url('../../static/imgs/loginimg.png');
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0 56rpx;

		.title {
			padding-top: 188rpx;

			.h5 {
				font-size: 78rpx;
				font-family: Trebuchet MS;
				font-weight: 400;
				color: #FFFFFF;
			}

			.h6 {
				font-size: 56rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.banner {
			width: 606rpx;
			height: 674rpx;
			background: rgba(238, 244, 255, 0.66);
			border-radius: 16rpx;
			margin: 118rpx auto 0;
			padding: 24rpx 0;

			.loginBox {
				margin-left: -19rpx;
				width: 644rpx;
				height: 626rpx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 16rpx;
				padding: 80rpx 26rpx 0;

				.inputBox {
					width: 592rpx;
					height: 88rpx;
					background: #F2F2F7;
					border-radius: 16rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.line {
						width: 0px;
						height: 44rpx;
						border: 2rpx dashed rgba(153, 153, 153, 0.5019607843137255);
						margin-left: 32rpx;
						margin-right: 20rpx;
					}

					.num {
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}

					.code {
						margin-left: auto;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #2D7AFE;
					}
				}

				.tips {
					margin-top: 32rpx;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;

					text {
						color: #2D7AFE;
					}
				}

				.btn {
					margin-top: 80rpx;
					width: 574rpx;
					height: 100rpx;
					background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
					border-radius: 16rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 34rpx;
					font-family: Segoe UI;
					color: #FFFFFF;
				}
			}
		}

		.moreWay {
			display: flex;
			flex-direction: column;
			align-items: center;

			.more {
				margin-top: 102rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.line {
					width: 84rpx;
					height: 0px;
					border: 2rpx solid #F2F2F7;
				}

				text {
					margin: 0 40rpx;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.img {
				margin-top: 34rpx;
				width: 88rpx;
				height: 88rpx;
			}
		}
	}
</style>
